{% extends 'base.html' %}

{% block css%}
<style type="text/css">
    input[type="checkbox"]:after {
    width: 0px;
    height: 0px;
}

.red {
    color: red;
}

.green {
    color: green;
}
</style>
{% endblock %}

{% block body%} 
<h3>Port Error/Alarm Checker</h3> 
<small>
    <i class="fa fa-circle red" style="font-size:14px"></i> Module Interrupt  
    &nbsp;&nbsp;
    <i class="fa fa-circle green" style="font-size:14px"></i> Normal Operation
</small>
<br><br>
<div class="row">

    <div class="col-md-3">
        <table class="table table-hover table-condensed">

                {% for port in port_g1 %}
                  <tr>
                      <td  width="75%" style="font-size: 14px">
                        Port{{ port }}
                      </td>
                      <td>
                          <i id="port_err_alm_checker_Port{{ port }}" class="fa fa-circle" style="font-size:24px"></i>
                      </td>
                  </tr>
                  {% endfor %}
  
          </table>
    </div>

    <div class="col-md-3">
        <table class="table table-hover table-condensed">

                {% for port in port_g2 %}
                  <tr>
                      <td  width="75%" style="font-size: 14px">
                        Port{{ port }}
                      </td>
                      <td>
                          <i id="port_err_alm_checker_Port{{ port }}" class="fa fa-circle" style="font-size:24px"></i>
                      </td>
                  </tr>
                  {% endfor %}
  
          </table>
    </div>

    <div class="col-md-3">
        <table class="table table-hover table-condensed">

                {% for port in port_g3 %}
                  <tr>
                      <td  width="75%" style="font-size: 14px">
                        Port{{ port }}
                      </td>
                      <td>
                        <i id="port_err_alm_checker_Port{{ port }}" class="fa fa-circle" style="font-size:24px"></i>
                      </td>
                  </tr>
                  {% endfor %}
  
          </table>
    </div>


    <div class="col-md-3">
        <table class="table table-hover table-condensed">

                {% for port in port_g4 %}
                  <tr>
                      <td  width="75%" style="font-size: 14px">
                        Port{{ port }}
                      </td>
                      <td>
                          <i id="port_err_alm_checker_Port{{ port }}" class="fa fa-circle" style="font-size:24px"></i>
                      </td>
                  </tr>
                  {% endfor %}
          </table>
          <div class="pull-right">
            <button class="btn btn-success" id="btn_port_err_alm_checker_get">Get</button>

          </div>



    </div>


  </div>
{% endblock %}

{% block js%} 
{{ super() }}
<script type="text/javascript">

    function btn_port_err_alm_checker_get()
    {
        url = "/api/btn_port_err_alm_checker_get"
        $.get(url, function(data, status){
            console.log(data);
            d = JSON.parse(data);
            $.each(d,function(index,value){
                if(value == 1)
                {
                    $("#port_err_alm_checker_" + index).removeClass("red");
                    $("#port_err_alm_checker_" + index).addClass("green");
                }
                else
                {
                    $("#port_err_alm_checker_" + index).removeClass("green");
                    $("#port_err_alm_checker_" + index).addClass("red");
                }				
            });
        });
    }

    $(document).ready(function(){
        btn_port_err_alm_checker_get();

        $("#btn_port_err_alm_checker_get").click(function () {
            // $("#btn_get_mod_pin_1_loading").show();
            btn_port_err_alm_checker_get();
        });



    });

</script>
{% endblock %}